<html>
	<header>
	
	
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	 <script src="threebox.js" type="text/javascript"></script>
	<script src="https://minedata.cn/minemapapi/v1.3/minemap.js"></script>


   
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
        }

        html, body {
            margin: 0;
            padding: 0;
        }
		
		  *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        #container,#map,#deck-layer{
            height:100%;
        }
        
	
</style>
</header>
<body>
<div id="container">
    <div id="map"></div>
    
</div>
 

<script>
  
 
minemap.accessToken = '449ba822788c46bea9f90dfba48e5269';
minemap.solution = '3470';

var myjson = {}

const map = new minemap.Map({
    container: 'map',
    style: 'http://minedata.cn/service/solu/style/id/3470',
    center: [118.8386378, 37.0313616],
    zoom: 13,
    bearing: 0,
    pitch: 60,
});

var obj ;
var aircraft;
var planePosition;
var angle = 0
map.on('load', function () {
	

	window.threebox = new Threebox(map);
    threebox.setupDefaultLights();


    // Load and manipulate a THREE.js scenegraph as you would normally
    loader = new THREE.JSONLoader();

    loader.load("models/boeing747-400-jw.json", function(geometry) {
        geometry.rotateY((90/360)*2*Math.PI);
        geometry.rotateX((90/360)*2*Math.PI);

        var material = new THREE.MeshPhongMaterial( {color: 0x838B8B, side: THREE.DoubleSide}); 
        aircraft = new THREE.Mesh( geometry, material );
        planePosition = [118.8386378, 37.0313616 ,1000];

        // Add the model to the threebox scenegraph at a specific geographic coordinate
        obj = threebox.addAtCoordinate(aircraft, planePosition, {scaleToLatitude: true, preScale: 40,heading: 130});
        
        obj.rotation.z += -Math.PI / 2
        obj.scale.y = 4
        /**
        var render = function(){
        	requestAnimationFrame(render)
        	
        	planePosition[0] = 118.8386378 + Math.sin(angle)
        	planePosition[1] = 37.0313616 + Math.cos(angle)
        	
        	threebox.moveToCoordinate(aircraft, planePosition, {'scaleToLatitude': true, 'preScale': 40,'heading': 30})
        	
        	map.setCenter({"lng": planePosition[0],"lat": planePosition[1]})
        	
        	
        	
        	angle += 0.0001
        }
        
        render()
        */
        
    });

});
 
</script>   
</body>
</html>